<template>
  <div class="alert-body" v-if="dialogVisible">
    <div class="alert-box">
      <div class="alert-box-header">
        <span>【{{cornerName}}】【{{sectionName}}】水平分布</span>
        <span class="iconfont iconguanbi" @click="closeModle"></span>
      </div>
      <div class="alert-box-body">
        <div class="point-list-line">
          <div class="corner-point-list" v-for="(item,index) in assesslist">
            <div class="corner-point-list-l">
              {{ index + 1 }}.{{ item.assess.title }}
            </div>
            <div class="corner-point-list-r">
              <div class="corner-point-list-r-option" v-for="child in item.fraction"
                   @click="showStudentDetail(child)">
                <span>{{ child.name }}: </span><span class="point-number">{{child.number || 0}}</span> <i>人</i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="alert-box-footer">
        <span @click="closeModle">返回</span>
      </div>
    </div>
    <sectionStudentList :visible.sync="studentVisible" :cornerData="{name: cornerName}"
                        :sectionData="{section_name: sectionName}" :levelData="levelData"></sectionStudentList>
  </div>
</template>
<script>
import {cornerBrandDetail} from "@/api/admin/corner";
import sectionStudentList from "@/views/admin/Corner/components/sectionStudentList";
export default {
  name: "foodData",
  props: ['visible', 'cornerId', 'sectionId', 'cornerName', 'sectionName'],
  components: {sectionStudentList},
  data() {
    return {
      typeData: 'food_check',
      foodCodeVisible: false,
      dialogVisible: false,
      teacherList: [],
      assesslist: [],
      studentVisible: false,
      cornerData: null,
      sectionData: null,
      levelData: null
    };
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if(this.visible){
        // honorDetail({name: this.dataOption}).then(res=>{
        //   console.log('res++++', res)
        //   this.teacherList = res.list
        // })
        this.InitFn()
      }else{
        this.teacherList = []
      }
    }
  },
  created() {
  },
  mounted() {

  },
  methods: {
    InitFn() {
      cornerBrandDetail({cate_id: this.cornerId, section_id: this.sectionId}).then(res => {
        console.log('res:', res)
        // evaluate_id: 192
        // id: 393
        // items_id: 2
        // number: 4
        // section_id: 2
        let point_ = {}
        for (let item of res.evaluate) {
          if (item.section_id === this.sectionId) {
            if (!point_[item.items_id]) {
              point_[item.items_id] = {}
            }
            point_[item.items_id][item.evaluate_id] = {number:item.number, id: item.id}
          }
        }
        for (let item of res.assess) {
          if (item.fraction) {
            item.fraction = JSON.parse(item.fraction)
            if (point_[item.items_id]) {
              for (let fra_ of item.fraction) {
                fra_.number = 0
                if (point_[item.items_id][fra_.id]) {
                  fra_.number = point_[item.items_id][fra_.id].number
                  fra_.logId = point_[item.items_id][fra_.id].id
                }
              }
            }
          }
        }
        this.assesslist = res.assess
        console.log('assesslist: [],+++', this.assesslist)
      })
    },
    showStudentDetail(item) {
      if(item.number){
        this.levelData = JSON.parse(JSON.stringify(item))
        this.studentVisible = true
      }else{
        this.$message.warning('没有可查看的记录');
      }
    },
    closeModle() {
      this.$emit('update:visible', false)
      this.dialogVisible = false
    },
    confirmFn() {
      this.showTime = false
    },
  }
};
</script>
<style scoped>
.alert-body {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .7);
  display: flex;
  align-items: center;
  justify-content: center;
}

.alert-box {
  width: 75%;
  height: 70%;
  border: 1px solid #005da6;
  background: rgba(13, 17, 44, .8);
  display: flex;
  flex-direction: column;
  border-radius: 10px;
}

.alert-box-header {
  height: 60px;
  display: flex;
  color: #beebfe;
  font-size: 26px;
  padding: 0 20px;
  line-height: 60px;
}

.alert-box-header .iconfont {
  font-size: 26px;
  cursor: pointer;
  margin-left: 20px;
  padding: 0 10px;
}

.alert-box-header span:first-child {
  flex: 1;
}

.alert-box-footer {
  height: 60px;
}

.alert-box-body {
  flex: 1;
  padding: 0 20px;
  overflow-y: auto;
  background: #fff;
  margin: 0 20px;
  border-radius: 10px;
}


.alert-box-list-in i {
  color: #02d5ff;
  font-style: normal;
  font-size: 20px;
  font-weight: bold;
}

.alert-box-list-in em {
  font-style: normal;
}

.alert-box-footer {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.alert-box-footer span {
  display: block;
  border: 1px solid #beebfe;
  color: #beebfe;
  width: 120px;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  border-radius: 3px;
  cursor: pointer;
}

.alert-box-footer span:first-child {
  margin-right: 20px;
}

.alert-box-footer span:hover {
  background: rgba(0, 73, 85, 0.6);

}

.corner-point-list {
  display: flex;
  border-bottom: 1px solid #ddd;
  padding: 15px 5px;
  cursor: pointer;
  font-size: 22px;
}

.corner-point-list:last-child {
  border: none;
}

.corner-point-list:hover {
  background: #99d3ff;
}

.corner-point-list-l {
  flex: 1;
}

.corner-point-list-r {
  width: 600px;
  display: flex;
  align-items: center;
}

.corner-point-list-r-option {
  flex: 1;
  text-align: center;
  border-right: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}

.corner-point-list-r-option:last-child {
  border-right: none;
}

.corner-point-list-r-option:hover {
  text-decoration: underline;
  font-weight: bold;
}
.corner-point-list-r-option i{
  font-size: 18px;
  color: #999;
  font-style: normal;
}
.corner-point-list-r-option span.point-number{
  color: #006dcd;
  font-size: 24px;
  margin-left: 3px;
  margin-left: 10px;
}
</style>
